<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <!-- 引入jQuery -->
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo.jpg" alt="">
        <span class="title">博客系统(SSM版本)</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">首页</a>
        <a href="myblog_list.html" class='myblog' id="myblog">个人主页</a>
        <a href="blog_edit.html"></a>
        <a href="javascript:mydel()" class="del">删除博客</a>
        <a href="blog_update.html" class="update">修改博客</a>
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="img/person.jpg" class="avtar" alt="">
                <h3>用户名</h3>
                <a href="https://blog.csdn.net/weixin_61061381?type=blog">CSDN 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>95</span>
                    <span>7</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3>我的第一篇博客</h3>
                <!-- 博客时间 -->
                <div class="date">2021-06-02</div>
                <!-- 博客正文 -->
                <div id="editorDiv">

                </div>
            </div>
        </div>
    </div>

    
    <!-- <script type="text/javascript">
            var editormd;
            function initEdit(md){
                editormd = editormd.markdownToHTML("editorDiv", {
                markdown : md, // Also, you can dynamic set Markdown text
                // htmlDecode : true,  // Enable / disable HTML tag encode.
                // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
                });
            }
            
    </script>  -->
</body>
  <script type="text/javascript">
    var authorId;
    var authorName;

       // 获取到指定博客id的详情——》通过博客id获取到uid——》这篇博客的作者id(uid)
       function getBlogDetail() {
        jQuery.ajax({
            type:"get",
            url:"/article/get_by_blog_id" + location.search,
            success: function(result) {
                if (result.state == 200 && result.data != null) {
                          // 根据返回的数据来构造页面
                    // rightDiv是我们博客详情，我们具体的博客内容要挂在rightDiv这个结点上
                    let rightDiv = document.querySelector('.container-right'); // 获取我们上面的右侧页面对象，接下来我们就可以对右侧页面对象进行操作来给我们页面添加元素
                    rightDiv.className = 'container-right'; // 引入css

                    // 博客标题
                    let titleDiv = document.querySelector('.container-right h3');
                    titleDiv.innerHTML = result.data.title;
                     // 发布日期
                    let dateDiv = document.querySelector('.container-right .date');
                    dateDiv.innerHTML = result.data.createtime;
                    // 博客作者
                    authorId = result.data.uid;
                    get_detail_by_uid(); // 执行该函数，通过uid获取username;
                    getUser();
                     // 创建内容
                     // 刚才这里是直接把正文内容设置到 innerHTML 中了, 没有渲染的过程的. 
                    // let divContent = document.querySelector('#content');
                    // divContent.innerHTML = body.content;
                     // 靠谱的做法, 应该是先使用 editor.md 进行渲染. 
                     // [重要] 这个方法就是 editor.md 提供的一个方法把 markdown 字符串转成格式化的效果. 
                    // 第一个参数是一个 div 的 id, 表示要把渲染结果放到哪个 div 中. 
                    // 第二个参数是一个 js 对象, 把正文内容传入即可. (还支持很多别的参数属性, 此处暂时不涉及)
                    editormd.markdownToHTML('editorDiv', {
                        markdown: result.data.content
                     });     
                }
                else {
                    alert(result.msg);
                    jQuery("#container-right").html("<h1>暂无数据</h1>");
                }
        
            },
            error: function(err) {
                if (err.status == 401) {
                    alert("当前用户未登录，你即将跳转到登录页面");
                    location.href = "login.html";
                }
               alert("获取个人博客列表失败！")
               //location.href = "login.html";
            }
        });
       }

       // 通过个人id(uid)查询个人详细信息
       function get_detail_by_uid() {
        jQuery.ajax({
            type:'post',
            url:'/user/get_detail_by_uid',
            data:{
                authorId:authorId
            },
            success: function(result) {
                authorName = result.data.username;
            }
        });
       }
       

// 通过getUser来给我们的个人主页传递uid(用户id)--->通过url
    // 博客详情页需要显示用户名（在左侧边框）和传递用户id——》在getUser方法中要体现这一点(通过当前的博客的用户id获取到这边博客的作者（姓名）)
    function getUser() {
       jQuery.ajax({
         type: 'get',
         url: '/user/get_user',
         success: function(result) {
           // 替换条原来的用户信息
           var userDiv = document.querySelector('.card h3');
           // 引入css，因为我们css就是按原来的类选择器来设置样式的
            // 但其实这一步也没什么必要，因为我们只是获取到原来的作者标签，并不是新建的标签，在获取到了后该标签所对应的className本来就是原来的名字，不用担心原来的css样式失效
           userDiv.className = '.card h3';           
           userDiv.innerHTML = authorName;
            
            var linkDiv = document.querySelector('.myblog');
            // a标签跳转的过程就相当于是发了一个get请求，这里我们在跳转的url地址后加上要传递的参数，即QueryString,等下我们在博客详情页也会用到这个参数
            linkDiv.href = 'myblog_list.html?uid=' + result.data.id;
         },
         error: function() {
            // 因为我们的博客详情，不管用户登录还是没有登录，都能访问
            // 替换条原来的用户信息
           var userDiv = document.querySelector('.card h3');
           // 引入css，因为我们css就是按原来的类选择器来设置样式的
            // 但其实这一步也没什么必要，因为我们只是获取到原来的作者标签，并不是新建的标签，在获取到了后该标签所对应的className本来就是原来的名字，不用担心原来的css样式失效
           userDiv.className = '.card h3';           
           userDiv.innerHTML = authorName;
            
            // 强行跳转到登录页面.
            // location.assign('/login.html');
         }
       });
      }

       // 删除按钮重复制，传递对应的博客id.
       function mydel() {
        if (confirm("确认要删除该篇博客？")) {
            jQuery.ajax({
                url:"/article/del" + location.search,
                type:"get",
                success: function(result) {
                    if (result.state == 200 && result.data > 0) {
                        alert("恭喜！删除成功！");
                        location.href = "/blog_list.html";
                    }
                    else {
                        alert("对数据库进行删除操作失败");
                    }
                },
                error: function(error) {
                    if (error.status == 401) {
                        alert("当前用户未登录，你即将跳转到登录页面！");
                        location.href = "login.html";
                    }
                    else {
                        alert("删除失败！请稍后再试！");
                    }
                }
            });
        }
    }   
       function init () {
        getBlogDetail();
        var temp = document.querySelector('.update');
        temp.href = "blog_update.html" + location.search;
       }
       init();
       // get_detail_by_uid(); // 注意顺序，我们的get_detail_by_uid();中用到了getBlogDetail中的autorId(在getBlogDetail重新给authorId赋值)
       //getUser();  // getUser用到了get_detail_by_uid中的authorName;
     </script>

</html>